<template>
  <a-card style="width: 100%" title="申报流程">
    <template #extra>
      <a-tooltip placement="top">
        <template #title>
          <span>返回上级</span>
        </template>
        <a-button size="small" @click="getOut"> <RollbackOutlined /></a-button>
      </a-tooltip>
    </template>
    <div class="header">
      <ul>
        <li v-for="(item, index) in steps" :key="index" :style="getItemStyle(index)">
          {{ item }}
        </li>
      </ul>
      <div class="change" v-if="status != 0 && status != 8 && status != 10 && status != 7">
        <div class="tips">
          <div>
            <span>*资料已提交。</span>
            <span style="color: #d85050; cursor: pointer" @click="Findhistory">查看历史</span>
          </div>
        </div>
        <!-- 内容 根据后端返回内容，返回不同的结果-->
        <div class="content">
          <div class="contentArea" v-if="status == 1 || status == 2 || status == 3 || status == 4 || status == 5 || status == 6 || status == 11">
            <h2 style="color: #438eb9">资料审核中...</h2>
            <p>您的资料已上传完成,请耐心等待3-5个工作日,我们的工作人员会通过手机</p>
            <p>短信，邮箱的形式告知您的审核状态，请注意查收。</p>
          </div>
        </div>
      </div>
      <div class="change" v-if="status == 8">
        <div class="tips">
          <div>
            <span>*对不起，您提交的资料不符合标准请重新提交。</span>
            <span style="color: #d85050; cursor: pointer" @click="Findhistory">查看历史</span>
          </div>
        </div>
        <!-- 内容 根据后端返回内容，返回不同的结果-->
        <div class="content">
          <h2 style="color: #d85050; text-align: center">审核不通过原因</h2>
          <div class="contentAreaText">
            <div class="causeBox">
              <h4>基金科审批意见:</h4>
              <p style="margin: 0; padding: 0; text-align: left">
                {{ blauditopinionj ? blauditopinionj : '暂无' }}
              </p>
            </div>
            <div class="causeBox">
              <h4>财务室审批意见:</h4>
              <p style="margin: 0; padding: 0; text-align: left">
                {{ blauditopinionc ? blauditopinionc : '暂无' }}
              </p>
            </div>
            <div class="causeBox">
              <h4>副主任审批意见:</h4>
              <p style="margin: 0; padding: 0; text-align: left">
                {{ blauditopinionf ? blauditopinionf : '暂无' }}
              </p>
            </div>
            <div class="causeBox">
              <h4>主任审批意见:</h4>
              <p style="margin: 0; padding: 0; text-align: left">
                {{ blauditopinionz ? blauditopinionz : '暂无' }}
              </p>
            </div>
            <div class="causeBox">
              <h4>秘书长审批意见:</h4>
              <p style="margin: 0; padding: 0; text-align: left">
                {{ blext4 ? blext4 : '暂无' }}
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="change" v-if="status == 10">
        <div class="tips">
          <div>
            <span>*资料审核完成 <span style="color: #438eb9; cursor: pointer" @click="getDowload">点击下载</span></span>
          </div>
        </div>
        <!-- 内容 根据后端返回内容，返回不同的结果-->
        <div class="content">
          <div class="contentArea">
            <h2 style="color: #438eb9">资料审核无误</h2>
            <p>请携带好您的项目申报书到基金会盖章</p>
            <p>基金会地址：甘肃省兰州市天水南路222号兰州大学学生活动中心404室</p>
          </div>
        </div>
      </div>
      <div class="change" v-if="status == 7">
        <div class="tips">
          <div>
            <span style="color: #d85050; cursor: pointer" @click="Findhistory">*查看历史</span>
          </div>
        </div>
        <!-- 内容 根据后端返回内容，返回不同的结果-->
        <div class="content">
          <div class="contentArea">
            <h2 style="color: #438eb9">恭喜您！审核流程已全部完成！您可以进行下一步操作了。</h2>
          </div>
        </div>
      </div>
    </div>
  </a-card>
  <br />
</template>

<script setup>
  import { ref, reactive, defineEmits, defineProps, onMounted } from 'vue';
  import { ProManageApi } from '../../../../api/ProManage/ProManage-api';
  import { smartSentry } from '/@/lib/smart-sentry';
  import { message } from 'ant-design-vue';
  const status = ref(0);
  const steps = reactive(['资料填写', '用户提交审核', '基金会审核', '下载资金使用申请表到基金会盖章', '基金会盖章中', '审核完成']);
  //  基金科审批意见
  const blauditopinionj = ref('');
  // 财务室审批意见
  const blauditopinionc = ref('');
  // 副主任审批意见
  const blauditopinionf = ref('');
  //主任审批意见
  const blauditopinionz = ref('');
  //秘书长审批意见
  const blext4 = ref('');
  //申报状态
  const props = defineProps({
    DateId: String,
  });
  async function getFindInitStatus() {
    try {
      let blapplyids = props.DateId;
      let res = await ProManageApi.ProMangeStatus(blapplyids);
      status.value = res.data.blaudit;
      blauditopinionj.value = res.data.blauditopinionj; //基金科
      blauditopinionc.value = res.data.blauditopinionc; //财务科
      blauditopinionf.value = res.data.blauditopinionf; //副主任
      blauditopinionz.value = res.data.blauditopinionz; //主任
      blext4.value = res.data.blext4; //秘书长
    } catch (error) {
      smartSentry.captureError(error);
    }
  }
  //控制背景颜色的方法
  function getItemStyle(index) {
    const baseColor = '#dedede';
    const highlightColors = '#438eb9'; // 示例背景色
    if (status.value === 0) {
      // 状态 0: '资料填写', '用户提交审核' 激活，其余置灰
      return {
        backgroundColor: index === 0 || index === 1 ? highlightColors : baseColor,
      };
    } else if ((status.value >= 1 && status.value <= 6) || status.value == 11) {
      // 状态 1-6: '资料填写', '用户提交审核', '基金会审核' 激活，其余置灰
      return {
        backgroundColor: index <= 2 ? highlightColors : baseColor,
      };
    } else if (status.value === 10) {
      // 状态 10: '资料填写', '用户提交审核', '基金会审核', '审核通过、下载项目申报书到基金会' 激活，其余置灰
      return {
        backgroundColor: index <= 3 ? highlightColors : baseColor,
      };
    } else if (status.value === 7) {
      // 状态 7: 全部激活
      return {
        backgroundColor: highlightColors,
      };
    } else if (status.value === 8) {
      // 状态 8: '资料填写', '用户提交审核' 激活，其余置灰
      return {
        backgroundColor: index <= 1 ? highlightColors : baseColor,
      };
    } else {
      // 默认情况：全置灰
      return {
        backgroundColor: baseColor,
      };
    }
  }

  async function getDowload() {
    try {
      let params = {
        blapplyid: props.DateId,
      };
      let res = await ProManageApi.MoneyDowload(params);
      const link = document.createElement('a');
      const url = window.URL.createObjectURL(new Blob([res.data]));
      link.href = url;
      link.download = '资金使用申请表.docx';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL(url);
      message.success(`下载成功！`);
    } catch (error) {
      smartSentry.captureError(error);
    }
  }

  onMounted(() => {
    getFindInitStatus();
  });

  //返回的按钮操作
  const emit = defineEmits();
  const getOut = () => {
    let obj = {
      type: 0,
    };
    emit('getBlack', obj);
  };
  //查看历史按钮方法
  const Findhistory = () => {
    let obj = {
      type: 4,
      id: props.DateId,
    };
    emit('getBlack', obj);
  };
</script>

<style lang="scss" scoped>
  .causeBox {
    width: 80%;
    text-align: left;
    border-block-end: 1px solid rgba(5, 5, 5, 0.06);
    margin: 20px auto;
    h4 {
      color: rgba(0, 0, 0, 0.88);
      font-size: 15px;
      line-height: 1.5714285714285714;
      font-weight: bold;
    }
    p {
      color: rgba(0, 0, 0, 0.45);
      font-size: 14px;
    }
  }
  .header {
    width: 100%;
    margin: auto;
    padding: 10px; /* 调整内边距来保持间隙一致 */
    box-sizing: border-box; /* 确保内边距包含在总宽度内 */
    ul {
      display: flex; /* 使用 Flexbox 布局 */
      justify-content: center; /* 居中对齐 */
      padding: 0;
      margin: 0;
      list-style: none;
      width: 100%;
    }
    li {
      width: 250px;
      height: 40px;
      line-height: 20px;
      padding: 10px;
      background-color: #dedede;
      margin: 0px 1px;
      text-align: center;
      color: #ffff;
    }
    li:first-child {
      border-bottom-left-radius: 20px;
      border-top-left-radius: 20px;
    }
    li:last-child {
      border-bottom-right-radius: 20px;
      border-top-right-radius: 20px;
    }
  }
  .change {
    margin-top: 30px;
  }
  .tips {
    margin: 10px 4.3% 20px;
    background: #fffcf5;
    line-height: 38px;
    border: 1px solid #b99f6c;
    font-size: 14px;
    text-align: center;
    color: #b8a273;
  }
  .content {
    background: #f7f7f7;
    border: 1px solid #dedede;
    margin: 40px 4.3% 0px 4.3%;
    padding: 15px 19px;
    padding-bottom: 50px;
    min-height: 450px;
  }
  .contentArea {
    text-align: center;
    margin-top: 30px;
  }
  .contentAreaText {
    text-align: center;
    width: 100%; /* 设置宽度为100%，可以根据需要调整 */
    overflow-wrap: break-word; /* 允许单词在超出边界时换行 */
    word-wrap: break-word; /* 兼容旧版浏览器 */
    h2 {
      margin: 20px 0 1.5em 0;
      color: red;
    }
  }
</style>
